<template>
  <view class="goods-list">
    <!-- 搜索框 -->
    <ugo-search></ugo-search>
    <!-- tab标签栏 -->
    <u-tabs
      :list="list"
      :bar-width="100"
      :active-item-style="{ color: 'black' }"
      active-color="red"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>
    <!-- tabs 对应内容 -->
    <scroll-view
      :refresher-triggered="refresherTriggered"
      refresher-enabled
      @refresherrefresh="handleRefresherRefresh"
      @scrolltolower="handleScrollToLower"
      scroll-y
      v-if="current === 0"
      class="goods-default"
    >
      <navigator
        class="goods-item"
        v-for="item in goods"
        :key="item.goods_id"
        :url="'/pages/goods_detail/goods_detail?goods_id=' + item.goods_id"
      >
        <view class="goods-image">
          <u-image
            width="191rpx"
            height="191rpx"
            :src="item.goods_small_logo"
          ></u-image>
        </view>
        <view class="goods-info">
          <view class="goods-name u-line-2">{{ item.goods_name }} </view>
          <view class="goods-price">￥{{ item.goods_price }} </view>
        </view>
      </navigator>
    </scroll-view>
    <view v-else-if="current === 1"> 销量 </view>
    <view v-else-if="current === 2"> 价格 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      params: {
        query: "",
        cid: "",
        pagenum: 1,
        pagesize: 20,
      },
      goods: [], //获取的商品数据
      total: 0,
      refresherTriggered: false,
    };
  },
  onLoad(option) {
    this.params.cid = option.id || 5;
    this.getGoods();
  },
  methods: {
    change(index) {
      this.current = index;
    },
    //   获取数据
    async getGoods() {
      const res = await this.$u.get("/goods/search", this.params);
      console.log(57, res);
      this.goods = [...this.goods, ...res.message.goods];
      this.total = res.message.total;
    },
    // 滚动条触底
    handleScrollToLower() {
      if (this.goods.length >= this.total) {
        uni.showToast({
          title: "没有更多数据了",
          icon: "none",
        });
        return;
      }
      this.params.pagenum++;
      this.getGoods();
    },
    // 上拉刷新
    async handleRefresherRefresh() {
      this.refresherTriggered = true;
      this.goods = [];
      this.params.pagenum = 1;
      await this.getGoods();
      this.refresherTriggered = false;
    },
  },
};
</script>

<style lang="scss">
.goods-list {
  display: flex;
  height: 100vh;
  flex-direction: column;
  .goods-default {
    flex: 1;
    overflow: auto;
  }
}
.goods-item {
  display: flex;
  margin-top: 10rpx;
  border-bottom: 1rpx solid #ccc;
  .goods-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .goods-info {
    flex: 2;
    display: flex;
    margin-left: 20rpx;
    flex-direction: column;
    justify-content: space-around;
    .goods-name {
      font-size: 28rpx;
    }
    .goods-price {
      color: $themeColor;
    }
  }
}
</style>